// 源插件
import React, { PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
// 视图插件
import { Button, Card, Form, notification } from 'antd';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
import OptionModal from './OptionModal.js';
// css OR less预编译器

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ fu, loading }) => ({
  fu,
  loading: loading.models.fuRule,
}))
@Form.create()
class NewTwoOption extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSourceSC: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceSP: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceModal: {
      data: [],
      total: [],
      code: 0,
    },
  };

  dataSourceModalChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'fu/GetTodayTradeList',
      payload: {},
      callback: res => {
        that.setState({
          dataSourceModal: {
            unfixed: true,
            code: 1,
            data: res.data,
            total: [],
            columns: [
              {
                title: '类型',
                dataIndex: 'type',
                type: 'number',
                width: 60,
                filters: [
                  {
                    text: 'SP',
                    value: '1',
                  },
                  {
                    text: 'SC',
                    value: '2',
                  },
                  {
                    text: 'BP',
                    value: '3',
                  },
                  {
                    text: 'BC',
                    value: '4',
                  },
                ],
                render: (value, row, index) => {
                  if (value === 1) {
                    return 'SP';
                  }
                  if (value === 2) {
                    return 'SC';
                  }
                  if (value === 3) {
                    return 'BP';
                  }
                  if (value === 4) {
                    return 'BC';
                  }
                  return value;
                },
              },
              {
                title: '股票代码',
                dataIndex: 'code',
                type: 'string',
                width: 120,
                sorter: true,
                search: true,
              },
              {
                title: '行权价',
                width: 80,
                dataIndex: 'strikeprice',
                type: 'number',
                sorter: true,
              },
              {
                title: '期权价格',
                width: 80,
                dataIndex: 'premium',
                type: 'number',
                sorter: true,
              },
              {
                title: '合约数',
                width: 80,
                dataIndex: 'contracts',
                type: 'number',
                sorter: true,
              },
              {
                title: '到期日',
                width: 100,
                dataIndex: 'expiry',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '是否属于股票池',
                width: 100,
                dataIndex: 'delflag',
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  if (value === 0) {
                    return '属于';
                  }
                  if (value === 1) {
                    return '不属于';
                  }
                },
                editable: {
                  filter: [
                    {
                      text: '属于',
                      value: '0',
                    },
                    {
                      text: '不属于',
                      value: '1',
                    },
                  ],
                },
              },
            ],
          },
        });
      },
    });
  }

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'fu/GetLastDayOptionList',
      payload: {},
      callback: res => {
        that.setState({
          dataSourceSC: {
            title: `二号基金期权持仓Sell Call ${(res.data[0].date || '').split(' ')[0]}`,
            code: 1,
            data: res.data,
            total: ['profit', 'todayprofit', 'initpremium', 'curpremium', 'positionsize'],
            // paging:true,
            columns: [
              {
                title: '序号',
                width: 50,
                dataIndex: 'serialnumber',
                type: 'number',
                sorter: true,
              },

              {
                title: '类型',
                dataIndex: 'type',
                type: 'number',
                width: 50,
                filters: [
                  {
                    text: 'SP',
                    value: '1',
                  },
                  {
                    text: 'SC',
                    value: '2',
                  },
                  {
                    text: 'BP',
                    value: '3',
                  },
                  {
                    text: 'BC',
                    value: '4',
                  },
                ],
                render: (value, row, index) => {
                  if (value === 1) {
                    return 'SP';
                  }
                  if (value === 2) {
                    return 'SC';
                  }
                  if (value === 3) {
                    return 'BP';
                  }
                  if (value === 4) {
                    return 'BC';
                  }
                },
              },
              {
                title: '期权代码',
                dataIndex: 'optioncode',
                type: 'string',
                width: 160,
                sorter: true,
                search: true,
                render: (value, row, index) => {
                  let color;
                  if (row.riskflag === 1) {
                    color = '#ff4d4f';
                  }
                  return <span style={{ color }}>{value}</span>;
                },
              },
              {
                title: '执行价',
                width: 75,
                dataIndex: 'strikeprice',
                type: 'number',
                sorter: true,
              },
              {
                title: '当前价格',
                width: 75,
                dataIndex: 'nowprice',
                type: 'number',
                sorter: true,
              },
              {
                title: '距执行价幅度',
                width: 75,
                dataIndex: 'changerate',
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{NumberDivide(mathService.mul(value, 100), null, '%')}</span>;
                },
              },
              {
                title: '成本价',
                width: 75,
                dataIndex: 'premium',
                type: 'number',
                sorter: true,
              },
              {
                title: '期权现价',
                width: 75,
                dataIndex: 'cflast',
                type: 'number',
                sorter: true,
              },
              {
                title: '昨收',
                width: 75,
                dataIndex: 'lastClose',
                type: 'number',
                sorter: true,
              },
              {
                title: '当日盈亏',
                width: 90,
                dataIndex: 'todayprofit',
                type: 'number',
                sorter: true,
              },
              {
                title: '盈亏金额',
                width: 90,
                dataIndex: 'profit',
                type: 'number',
                sorter: true,
              },
              {
                title: '初始权利金',
                width: 90,
                dataIndex: 'initpremium',
                type: 'number',
                sorter: true,
              },
              {
                title: '当前剩余权利金',
                width: 90,
                dataIndex: 'curpremium',
                type: 'number',
                sorter: true,
              },
              {
                title: '股数',
                width: 60,
                dataIndex: 'optioncount',
                type: 'number',
                sorter: true,
              },
              {
                title: '到期日',
                dataIndex: 'expiry',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '剩余天数',
                width: 60,
                dataIndex: 'dayleft',
                type: 'number',
                sorter: true,
              },
              {
                title: '头寸规模',
                width: 90,
                dataIndex: 'positionsize',
                type: 'number',
                sorter: true,
              },
              {
                title: '操作时间',
                dataIndex: 'tradedate',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              /*
              {
                title: '操作',
                width: 90,
                dataIndex: 'nowprice',
                type: 'undefined',
                editable: true,
                render: (value, row, index) => {
                  return row.serialnumber === '合计' ? (
                    ''
                  ) : row.optioncount !== 0 ? (
                    <span style={{ color: '#1166ff' }}>平仓</span>
                  ) : (
                    '已平仓'
                  );
                },
              }, */
            ],
          },
          // dataSourceSP: {
          //   title: '二号基金期权持仓Sell Put ' + (res.data.spList[0].date || '').split(' ')[0],
          //   code: 1,
          //   data: res.data.spList,
          //   total: ['profit', 'todayprofit', 'initpremium', 'curpremium', 'positionsize'],
          //   // paging:true,
          //   columns: [
          //     {
          //       title: '序号',
          //       width: 50,
          //       dataIndex: 'serialnumber',
          //       type: 'number',
          //       sorter: true,
          //     },
          //
          //     {
          //       title: '类型',
          //       dataIndex: 'type',
          //       type: 'number',
          //       width: 50,
          //       filters: [
          //         {
          //           text: 'SP',
          //           value: '1',
          //         },
          //         {
          //           text: 'SC',
          //           value: '2',
          //         },
          //         {
          //           text: 'BP',
          //           value: '3',
          //         },
          //         {
          //           text: 'BC',
          //           value: '4',
          //         },
          //       ],
          //       render: (value, row, index) => {
          //         if (value === 1) {
          //           return 'SP';
          //         } else if (value === 2) {
          //           return 'SC';
          //         } else if (value === 3) {
          //           return 'BP';
          //         } else if (value === 4) {
          //           return 'BC';
          //         }
          //       },
          //     },
          //     {
          //       title: '期权代码',
          //       dataIndex: 'optioncode',
          //       type: 'string',
          //       width: 160,
          //       sorter: true,
          //       search: true,
          //       render: (value, row, index) => {
          //         let color;
          //         if (row.riskflag === 1) {
          //           color = '#ff4d4f';
          //         }
          //         return <span style={{ color: color }}>{value}</span>;
          //       },
          //     },
          //     {
          //       title: '执行价',
          //       width: 75,
          //       dataIndex: 'strikeprice',
          //       type: 'number',
          //       sorter: true,
          //     },
          //     {
          //       title: '当前价格',
          //       width: 75,
          //       dataIndex: 'nowprice',
          //       type: 'number',
          //       sorter: true,
          //     },
          //     {
          //       title: '距执行价幅度',
          //       width: 75,
          //       dataIndex: 'changerate',
          //       type: 'number',
          //       sorter: true,
          //       render: (value, row, index) => {
          //         return <span>{NumberDivide(mathService.mul(value, 100), null, '%')}</span>;
          //       },
          //     },
          //     {
          //       title: '成本价',
          //       width: 75,
          //       dataIndex: 'premium',
          //       type: 'number',
          //       sorter: true,
          //     },
          //     {
          //       title: '期权现价',
          //       width: 75,
          //       dataIndex: 'cflast',
          //       type: 'number',
          //       sorter: true,
          //     },
          //     {
          //       title: '当日盈亏',
          //       width: 90,
          //       dataIndex: 'todayprofit',
          //       type: 'number',
          //       sorter: true,
          //     },
          //     {
          //       title: '盈亏金额',
          //       width: 90,
          //       dataIndex: 'profit',
          //       type: 'number',
          //       sorter: true,
          //     },
          //     {
          //       title: '初始权利金',
          //       width: 90,
          //       dataIndex: 'initpremium',
          //       type: 'number',
          //       sorter: true,
          //     },
          //     {
          //       title: '当前剩余权利金',
          //       width: 90,
          //       dataIndex: 'curpremium',
          //       type: 'number',
          //       sorter: true,
          //     },
          //     {
          //       title: '股数',
          //       width: 60,
          //       dataIndex: 'optioncount',
          //       type: 'number',
          //       sorter: true,
          //     },
          //     {
          //       title: '到期日',
          //       dataIndex: 'expiry',
          //       type: 'date',
          //       sorter: true,
          //       render: (value, row, index) => {
          //         return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
          //       },
          //     },
          //     {
          //       title: '剩余天数',
          //       width: 60,
          //       dataIndex: 'dayleft',
          //       type: 'number',
          //       sorter: true,
          //     },
          //     {
          //       title: '头寸规模',
          //       width: 90,
          //       dataIndex: 'positionsize',
          //       type: 'number',
          //       sorter: true,
          //     },
          //     {
          //       title: '操作时间',
          //       dataIndex: 'tradedate',
          //       type: 'date',
          //       sorter: true,
          //       render: (value, row, index) => {
          //         return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
          //       },
          //     },
          //     {
          //       title: '操作',
          //       width: 90,
          //       dataIndex: 'nowprice',
          //       type: 'undefined',
          //       editable: true,
          //       render: (value, row, index) => {
          //         return row.serialnumber === '合计' ? (
          //           ''
          //         ) : row.optioncount !== 0 ? (
          //           <span style={{ color: '#1166ff' }}>平仓</span>
          //         ) : (
          //           '已平仓'
          //         );
          //       },
          //     },
          //   ],
          // },
        });
      },
    });
  }

  openVisible() {
    this.dataSourceModalChange();
    this.setState({
      Visible: true,
    });
  }

  closeVisbile() {
    const that = this;
    this.setState(
      {
        Visible: false,
      },
      () => {
        that.dataSourceChange();
      }
    );
  }

  insert() {
    const that = this;
    const key = `open${Date.now()}`;
    const { dispatch } = that.props;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          dispatch({
            type: 'fu/SyncLastOptionTradeInfo',
            callback: res => {
              that.dataSourceChange();
            },
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否开始同步',
      btn,
      key,
      onClose: close,
    });
  }

  insertToday() {
    const that = this;
    const key = `open${Date.now()}`;
    const { dispatch } = that.props;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          dispatch({
            type: 'fu/MakeOptionTodayInfo',
            callback: res => {
              that.dataSourceChange();
            },
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否开始生成',
      btn,
      key,
      onClose: close,
    });
  }

  handleSave(row, values) {
    const that = this;
    const { dispatch } = that.props;
    dispatch({
      type: 'fu/UpdateOptionFlag',
      payload: {
        id: row.id,
        sellPrice: values.nowprice,
      },
      callback: res => {
        that.dataSourceChange();
      },
    });
  }

  rowSetKey(record, index) {
    if (record.ctbflag === 1) {
      return true;
    }
  }

  render() {
    const { Visible, dataSourceModal, dataSourceSC, dataSourceSP } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          {/* <Button type="danger" onClick={this.clear.bind(this)} style={{marginBottom:10,marginRight:25}} ghost>清空生成信息</Button> */}
          <Button
            type="primary"
            onClick={this.insert.bind(this)}
            style={{ marginBottom: 10, marginRight: 25 }}
            ghost
          >
            1.同步期权今日操作信息
          </Button>
          <Button
            onClick={this.openVisible.bind(this)}
            style={{ marginBottom: 10, marginRight: 25 }}
          >
            2.标记股票池
          </Button>
          <Button
            type="primary"
            onClick={this.insertToday.bind(this)}
            style={{ marginBottom: 10, marginRight: 25 }}
            ghost
          >
            3.生成今日信息
          </Button>

          <br />
          <br />
          <StandardTablePro
            dataSource={dataSourceSC}
            handleSave={this.handleSave.bind(this)}
            rowSetKey={this.rowSetKey.bind(this)}
          />
          {/*  <br />
          <br />
          <br />
          <StandardTablePro
            dataSource={dataSourceSP}
            handleSave={this.handleSave.bind(this)}
            rowSetKey={this.rowSetKey.bind(this)}
          /> */}
          <OptionModal
            visible={Visible}
            dataSource={dataSourceModal}
            dataSourceModalChange={this.dataSourceModalChange.bind(this)}
            closeVisbile={this.closeVisbile.bind(this)}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default NewTwoOption;
